import React from 'react';
import { Card, Tag, Avatar, Space } from 'antd';
import { UserOutlined, TrophyOutlined, StarOutlined } from '@ant-design/icons';
import SeamlessScroll from './SeamlessScroll';
import styles from './ScrollDemo.less';

const ScrollDemo: React.FC = () => {
  // 示例数据 1：标签列表
  const tags = [
    { name: 'React', color: 'blue' },
    { name: 'TypeScript', color: 'cyan' },
    { name: 'Ant Design', color: 'purple' },
    { name: 'UmiJS', color: 'orange' },
    { name: 'Node.js', color: 'green' },
    { name: 'Docker', color: 'geekblue' },
    { name: 'Kubernetes', color: 'magenta' },
    { name: 'MySQL', color: 'volcano' },
  ];

  // 示例数据 2：用户列表
  const users = [
    { name: '张三', avatar: 'https://i.pravatar.cc/150?img=1', score: 98 },
    { name: '李四', avatar: 'https://i.pravatar.cc/150?img=2', score: 95 },
    { name: '王五', avatar: 'https://i.pravatar.cc/150?img=3', score: 92 },
    { name: '赵六', avatar: 'https://i.pravatar.cc/150?img=4', score: 88 },
    { name: '钱七', avatar: 'https://i.pravatar.cc/150?img=5', score: 85 },
  ];

  // 示例数据 3：通知列表
  const notifications = [
    { id: 1, text: '🎉 系统升级成功！新功能已上线', type: 'success' },
    { id: 2, text: '📢 本周五下午进行系统维护', type: 'warning' },
    { id: 3, text: '🔥 限时优惠活动进行中', type: 'info' },
    { id: 4, text: '⚡ 新用户注册送积分', type: 'success' },
    { id: 5, text: '🎁 推荐好友得奖励', type: 'info' },
  ];

  // 示例数据 4：产品卡片
  const products = [
    { id: 1, name: 'API 接口平台', price: '¥999', icon: '🚀' },
    { id: 2, name: '数据分析工具', price: '¥1299', icon: '📊' },
    { id: 3, name: '监控系统', price: '¥799', icon: '📡' },
    { id: 4, name: '日志服务', price: '¥599', icon: '📝' },
    { id: 5, name: '云存储', price: '¥899', icon: '☁️' },
  ];

  return (
    <div style={{ padding: 24 }}>
      {/* 示例 1: 水平标签滚动 */}
      <Card title="示例 1：水平标签滚动" style={{ marginBottom: 24 }}>
        <SeamlessScroll
          data={tags}
          direction="horizontal"
          speed={30}
          itemWidth={120}
          renderItem={(item) => (
            <Tag color={item.color} style={{ margin: '0 8px', fontSize: 14, padding: '4px 12px' }}>
              {item.name}
            </Tag>
          )}
        />
      </Card>

      {/* 示例 2: 垂直用户排行榜 */}
      <Card title="示例 2：垂直用户排行榜" style={{ marginBottom: 24 }}>
        <div style={{ height: 200 }}>
          <SeamlessScroll
            data={users}
            direction="vertical"
            speed={25}
            itemHeight={60}
            renderItem={(item, index) => (
              <div className={styles.userItem}>
                <Space>
                  <div className={styles.rank}>#{index + 1}</div>
                  <Avatar src={item.avatar} icon={<UserOutlined />} />
                  <span style={{ fontWeight: 500 }}>{item.name}</span>
                  <Tag color="gold" icon={<TrophyOutlined />}>{item.score}分</Tag>
                </Space>
              </div>
            )}
          />
        </div>
      </Card>

      {/* 示例 3: 水平通知滚动 */}
      <Card title="示例 3：水平通知滚动（快速）" style={{ marginBottom: 24 }}>
        <SeamlessScroll
          data={notifications}
          direction="horizontal"
          speed={80}
          itemWidth={300}
          renderItem={(item) => (
            <div className={styles.notification}>
              {item.text}
            </div>
          )}
        />
      </Card>

      {/* 示例 4: 水平产品卡片 */}
      <Card title="示例 4：水平产品卡片" style={{ marginBottom: 24 }}>
        <SeamlessScroll
          data={products}
          direction="horizontal"
          speed={40}
          itemWidth={200}
          renderItem={(item) => (
            <div className={styles.productCard}>
              <div className={styles.productIcon}>{item.icon}</div>
              <div className={styles.productName}>{item.name}</div>
              <div className={styles.productPrice}>{item.price}</div>
              <StarOutlined style={{ color: '#faad14', fontSize: 16 }} />
            </div>
          )}
        />
      </Card>

      {/* 示例 5: 自定义速度控制 */}
      <Card title="示例 5：慢速滚动（鼠标悬停暂停）" style={{ marginBottom: 24 }}>
        <SeamlessScroll
          data={tags}
          direction="horizontal"
          speed={15}
          itemWidth={120}
          hoverPause={true}
          renderItem={(item) => (
            <div className={styles.tagCard}>
              <Tag color={item.color} style={{ fontSize: 16, padding: '6px 16px' }}>
                {item.name}
              </Tag>
            </div>
          )}
        />
      </Card>
    </div>
  );
};

export default ScrollDemo;
